<template>
  <view>
    <u-navbar height="50" title="发起拼团" title-size="36" title-color="#333"></u-navbar>
    <view class="locationView">
      <view class="addressView" v-if="pickupInfo" @click="onPickupAddress">
        <u-icon size="28" name="/static/dz2.png"></u-icon>
        <view class="location">
          <view class="storeName">自提点：{{ pickupInfo.name }}</view>
          <view class="address">{{ pickupInfo.full_address }}</view>
        </view>
        <u-icon size="15" name="/static/more.png"></u-icon>
      </view>
      <view class="addressView" v-else @click="onPickupAddress">
        <u-icon size="28" name="/static/dz2.png"></u-icon>
        <view class="location">
          <view class="storeName">暂无自提点</view>
          <view class="address">未获取到自提点，点击选择自提点</view>
        </view>
        <u-icon size="15" name="/static/more.png"></u-icon>
      </view>
      <view class="addressView" style="margin-top: 20rpx" @click="onPickup">
        <u-icon size="28" name="/static/ztr.png"></u-icon>
        <view class="addName" v-if="username">{{ username + ' ' + userphone }}</view>
        <view class="addName" v-else>请添加自提人信息</view>
        <u-icon size="13" name="/static/more.png"></u-icon>
      </view>
    </view>

    <view class="infoView">
      <view class="goodsView">
        <u-image width="180" height="180" :src="goodsInfo.goods_image" border-radius="10"></u-image>
        <view class="goodsData">
          <text class="goodsTitle">{{ goodsInfo.goods_name || '商品名称' }}</text>
          <!-- <view class="skuView">
						<text class="goodsSku">{{goodsInfo.sku_name}}</text>
						<text class="goodsNum">x{{goodsInfo.goods_num}}</text>
					</view> -->
          <view class="goodsPrice">
            <text class="price_tip">拼团价</text> ¥{{ goodsInfo.goods_price || '-.-' }}</view
          >
        </view>
      </view>
    </view>
    <view class="infoView">
      <view class="totalView">
        <view class="totalTitle">运费</view>
        <view>¥{{ goodsPrice }}</view>
      </view>
      <view class="totalView">
        <view class="totalTitle">优惠券</view>
        <view class="totalPrice">暂无优惠券</view>
      </view>

      <view class="totalView">
        <view class="totalTitle">推荐奖励抵扣</view>
        <view class="totalPrice">请输入抵扣金额</view>
      </view>
      <!-- <view class="totalView">
				<view class="totalTitle">优惠券抵扣</view>
				<view class="totalPrice" style="color: #FF2323;" v-if="user_coupon_id">-¥{{coupon_price}}</view>
				<view class="totalPrice" v-else>暂无优惠劵</view>
			</view> 
			<view class="totalView">
				<view class="totalTitle">配送费用</view>
				<view class="totalPrice">¥ 3</view>
			</view> -->
    </view>

    <view class="infoView">
      <view class="totalView">
        <view class="totalTitle">引荐码</view>
        <view class="totalPrice">¥亲输入引荐码</view>
      </view>
    </view>

    <view class="infoView">
      <view class="totalView">
        <view class="totalTitle">订单备注（选填）</view>
      </view>
      <view class="remark">
        <textarea
          style="
            width: calc(100% - 80rpx);
            flex-shrink: 0;
            margin: 10rpx 20rpx;
            padding: 20rpx;
            font-size: 28rpx;
            border: 1px solid #eee;
          "
          placeholder="请输入备注信息"
          rows="4"
        ></textarea>
      </view>
    </view>
    <u-popup
      v-model="pickupPopup"
      mode="bottom"
      width="750"
      height="700"
      :closeable="true"
      border-radius="15"
    >
      <view class="popup-box">
        <p class="popup-price">¥725</p>
        <p>请选择支付方式</p>
        <view class="pay-method">
          <view class="pay-method-left">
            <image src="@/static/wxzf.png" mode=""></image>
            <text>微信支付</text>
          </view>
          <!-- <u-icon class="pay-method-right" name="../../static/bj.png" size="40"></u-icon> -->
        </view>
        <view class="pay-method">
          <view class="pay-method-left">
            <image src="../../static/wxzf.png" mode=""></image>
            <text>微信支付</text>
          </view>
          <!-- <u-icon class="pay-method-right" name="../../static/bj.png" size="40"></u-icon> -->
        </view>
        <view class="pay-method">
          <view class="pay-method-left">
            <image src="../../static/wxzf.png" mode=""></image>
            <text>微信支付</text>
          </view>
          <!-- <u-icon class="pay-method-right" name="../../static/bj.png" size="40"></u-icon> -->
        </view>
        <view class="submit-pay"> 立即支付 </view>
      </view>
    </u-popup>

    <view class="bottomView">
      <view style="flex: 1">
        <view class="totalPrice3"
          >待付款：<text>¥{{ totalPrice }}</text></view
        >
      </view>
      <view style="flex: 1">
        <view class="bottomBtn" @click="onPayment()">提交开团</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // pickupPopup: false,
      // goodsInfo: '',
      // user_coupon_id: '', //优惠劵id
      // coupon_price: '', //优惠价格
      // pickupInfo: '',
      // username: '',
      // userphone: '',
      // pickup_name: '',
      // pickup_phone: '',

      // ----------
      group_product_id: '',
      pickupPopup: false,
      goodsType: 1, //1-其他商品，2，预售商品
      orderType: 4, //1-当日达订单，2-次日达订单，3-抢购订单
      goodsInfo: '',
      goodsPrice: 0,
      totalPrice: 0,
      user_coupon_id: '', //优惠劵id
      coupon_price: '', //优惠价格
      pickupInfo: '',
      username: '',
      userphone: '',
      pickup_name: '',
      pickup_phone: ''
    }
  },
  onLoad(res) {
    console.log('====', res)
    this.initData(res)
  },
  methods: {
    initData(res) {
      this.orderType = res.orderType ? res.orderType : 1
      this.goodsType = res.goodsType ? res.goodsType : 1
      this.goodsInfo = res.goods ? JSON.parse(res.goods) : ''
      console.log(',,,,', this.goodsInfo)
      this.goodsPrice = res.goodsPrice ? res.goodsPrice : 0
      if (this.goodsInfo) {
        let totalPrice = (Number(this.goodsPrice) * this.goodsInfo.goods_num).toFixed(2)
        this.totalPrice = totalPrice
      }
    },
    onPickup() {
      this.pickupPopup = true
    },
    onConfirm() {
      console.log(this.goodsInfo)
      if (this.$u.test.isEmpty(this.pickup_name)) {
        this.$u.toast('请输入联系人')
        return
      }
      if (this.$u.test.isEmpty(this.pickup_phone)) {
        this.$u.toast('请输入联系电话')
        return
      }
      this.username = this.pickup_name
      this.userphone = this.pickup_phone
      this.pickupPopup = false
    },
    onPickupAddress() {
      this.$utils.route('/other/select-pickup-cabinet2/select-pickup-cabinet2')
      uni.$on('data', (res) => {
        this.pickupInfo = res
        uni.$off('data')
      })
    },
    onPayment() {
      this.pickupPopup = true
      // let self = this;
      // if (this.$u.test.isEmpty(this.pickupInfo)) {
      // 	this.$u.toast('请选择自提点');
      // 	return
      // }
      // if (this.$u.test.isEmpty(this.pickup_name)) {
      // 	this.$u.toast('请添加自提人信息');
      // 	return
      // }
      // if (this.$u.test.isEmpty(this.pickup_phone)) {
      // 	this.$u.toast('请添加自提人信息');
      // 	return
      // }

      // this.$u.api.setGroupGoodsOrdersCreate({
      // 	group_product_id: this.goodsInfo.groupGoodsId,
      // 	product_sku_id: this.goodsInfo.sku_id,
      // 	product_number: this.goodsInfo.goods_num,
      // 	self_pickup_locker_id: this.pickupInfo.pickup_locker_id,
      // 	self_pickup_locker_box_id: this.pickupInfo.pickup_locker_box_id,
      // 	self_pickup_contact: this.pickup_name,
      // 	self_pickup_phone: this.pickup_phone,
      // 	type: this.orderType
      // }).then(res => {
      // 	self.$utils.route({
      // 		url: '/goods/payment/payment',
      // 		params: {
      // 			order_id: res.data.id,
      // 			money: res.data.pay_price,
      // 			total_weight: res.data.total_weight,
      // 			delivery_price: res.data.delivery_price,
      // 		}
      // 	})
      // })
    }
  }
}
</script>

<style>
@import url('group-order-confirm.css');

page {
  background: #f5f5f5;
}
</style>
